<template>
    <div class="Tab">
        <router-link tag="div" class="tab-item" to="/one">
        	<div class="img"></div>
            <div class="tab-link">
              购票
            </div>
        </router-link>
         <router-link tag="div" class="tab-item" to="/tow">
         	<div class="img2"></div>
            <div class="tab-link">
              乘车
            </div>
        </router-link>
         <router-link tag="div" class="tab-item" to="/thr">
         	<div class="img3"></div>
            <div class="tab-link">
              我的
            </div>
        </router-link>
    </div>
</template>

<script>
export default {
 
  data () {
    return {
    
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}
 .Tab{
   display: flex;
   font-size: 3vh;
   height: 4vh;
   line-height: 4vh;
margin-bottom: 0;

 } 
 .tab-item{
  flex: 1;
  text-align: center;
  display: line;

 }
 .tab-link{
  color:black;
   padding-bottom: 0vh;
 }
 .router-link-active div{
  color:  red;
 

 }

.Tab{
	width:100vw ;
	height: 5vh;
	position: fixed;
bottom: 0;
background: #2C3E50;
}
</style>
